import ProTable from '@ant-design/pro-table';

import {useMount, useRequest} from 'ahooks';
import {getResult} from '@/services/ant-design-pro/attribute';
import {
  editCategory,
  findByDataCategoryListPageSelect,
  findByDataCategoryListSelect,
  findByDataCategoryTreeList,
} from '@/services/ant-design-pro/menu';
import React, {useRef, useState} from 'react';
import {BetaSchemaForm, ProFormInstance} from '@ant-design/pro-form';
import useEffect from 'rc-util/lib/hooks/useEffect';
import {Button, message} from 'antd';
import {PlusOutlined} from '@ant-design/icons';
import MyUpload from "@/components/MyUpload";

const getAttr1 = async (key: string) => {
  let result = await getResult ( key, 1 );
  return result
}
const getAttr = async (key: string) => {
  let result = await getResult ( key, 0 );
  return result
}
const request = async () => {
  return new Promise<API.SelectItem[]> ( (resolve, reject) => {
    findByDataCategoryListSelect ()
      .then ( (res) => {
        var selectItems = res.data;
        selectItems.unshift ( {label: '下一单', value: 0} );
        resolve ( selectItems );
      } )
      .catch ( (e) => {
      } );
  } );
};

const request1 = async () => {
  return new Promise<API.SelectItem[]> ( (resolve, reject) => {
    findByDataCategoryListPageSelect ()
      .then ( (res) => {
        var selectItems = res.data;
        selectItems.unshift ( {label: '下一单', value: ""} );
        resolve ( selectItems );
      } )
      .catch ( (e) => {
      } );
  } );
};


const valueEnum = {
  all: {text: '全部', status: 'Default'},
  open: {
    text: '未解决',
    status: 'Error',
    suffixIcon: 'icon-a-Filter21',
  },
  closed: {
    text: '已解决',
    status: 'Success',
  },
  processing: {
    text: '解决中',
    status: 'Processing',
  },
};


type DataItem = {
  name: string;
  state: string;
};
const column = [
    {
      title: '编号',
      dataIndex: 'id',
      key: 'id',

    },
    {
      title: '图标',
      dataIndex: 'image',
      valueType: "image"
    },
    {
      title: '汉语名称',
      dataIndex: 'name',
      key: 'name',

      width: 'sm',
    }, {
      title: '维语名称',
      dataIndex: 'nameUg',
      key: 'nameUg',
      width: 'sm',

    },
    {
      title: '排水',
      dataIndex: 'sort',
      width: 'md',
    },
    {
      title: "目标类型",
      key: "targetType",
      dataIndex: "targetType",
      valueType: "select",
      valueEnum: await getResult ( 'advertisingTargetType', 0 )
    },
    {
      title: '系统类型',
      dataIndex: 'type',
      valueType: 'select',
      key: 'type',
      valueEnum: await getResult ( 'frontSystemCategoryType', 0 )
    },

    {
      title: '地址',
      dataIndex: 'path',
      key: "path"
    }
    ,
    {
      title: '权限字符',
      dataIndex: 'permission',
      key: 'permission',
    }, {
      title: '标题显示',
      dataIndex: 'flagIcon',
      key: 'flagIcon',
      valueType: "switch"
    }
    ,
    {
      title: '图标显示',
      dataIndex: 'flagTitle',
      key: 'flagTitle',
      valueType: "switch"
    },
    {
      title: '字段数',
      dataIndex: 'col',
      key: 'col'
    },
    {
      title: 'Grid显示',
      dataIndex: 'grid',
      key: 'grid',
      valueType: "switch",
      initialValue: true
    }, {
      title: 'Size',
      dataIndex: 'size',
      key: 'size',
      valueType: "digits",
      initialValue: 40
    }


    /*{
      title: "status",
      dataIndex: "status",
      valueType: "select",
      attribute: "user_auth_occupational"

    },*/

  ]
;
const cloneTbale = () => {

  const formRef = useRef<ProFormInstance> ();
  const [editDialg, setEditDialg] = React.useState ( false );
  const [columns, setColumns] = useState ( column );
  const columnDialog = [
    {
      title: '基本信息',
      valueType: 'group',
      columns: [
        {
          title: 'id',
          dataIndex: 'id',
          key: 'id',
          fieldProps: {
            hidden: true
          },
          hidden: true,
          hideInForm: true

        },
        {
          title: '图标',
          dataIndex: 'imageId',
          width: 'sm', renderFormItem: (item: any, f: any, form: any) => {
            const image = form.getFieldValue ( 'image' );
            const id = form.getFieldValue ( 'id' );
            return (<> <MyUpload
                type={5}
                url={image}
                id={id}
                onChange={(event) => {
                  console.log ( "MyUpload", event )
                  formRef.current?.setFieldsValue ( {imageId: event} );
                }}
              ></MyUpload></>
            )

          }

        },
        {
          title: '汉语名称',
          dataIndex: 'name',
          key: 'name',

          width: 'sm',
        }, {
          title: '维语名称',
          dataIndex: 'nameUg',
          key: 'nameUg',
          width: 'sm',

        },
        {
          title: '排水',
          dataIndex: 'sort',
          width: 'sm',
          valueType: 'digit',
          key: "sort"
        },
        {
          title: '类型',
          dataIndex: 'targetType',
          valueType: 'select',
          width: 'sm',
          request: async () => {
            return await getResult ( 'advertisingTargetType', 1 );
          },
        },
        {
          title: '系统类型',
          dataIndex: 'type',
          valueType: 'select',
          width: 'sm',
          request: async () => {
            return await getResult ( 'frontSystemCategoryType', 1 );
          },
        },


        {
          title: '下一单',
          dataIndex: 'parentId',
          valueType: 'select',
          width: 'sm',
          request,
        },
        {
          title: '地址',
          dataIndex: 'path',
          key: 'path',
          width: 'sm',
          valueType: "select",
          request: request1
        },

        {
          title: '权限字符',
          dataIndex: 'permission',
          width: 'sm',
        }, {
          title: '标题显示',
          dataIndex: 'flagIcon',
          key: 'flagIcon',
          valueType: "switch",
          initialValue: true
        }
        ,
        {
          title: '图标显示',
          dataIndex: 'flagTitle',
          key: 'flagTitle',
          valueType: "switch",
          initialValue: true
        },
        {
          title: '字段数',
          dataIndex: 'col',
          key: 'col',
          valueType: "digits",
          initialValue: 4
        },
        {
          title: 'Grid显示',
          dataIndex: 'grid',
          key: 'grid',
          valueType: "switch",
          initialValue: true
        }, {
          title: 'Size',
          dataIndex: 'size',
          key: 'size',
          valueType: "digits",
          initialValue: 40
        }
      ],
    },
  ];
  const [columnDialogs, setColumnDialogs] = useState ( columnDialog );
  const [menuInfo, setMenuInfo] = useState<API.MenuInfo> ();

  function editDialogInfo(row, index) {
    setMenuInfo ( row );
    formRef?.current?.setFieldsValue ( row );
    setEditDialg ( true );
  }

  function hideEditDialg() {
    setMenuInfo ( {id: 0} );
    formRef.current?.resetFields ();
    setEditDialg ( false );
  }

  function openEditDialg() {
    setMenuInfo ( {id: 0} );
    formRef.current?.resetFields ();
    setEditDialg ( true );
  }

  const {
    run: fetchByDataMenuTreeList,
    refresh,
    data: dataList,
    loading,
  } = useRequest ( findByDataCategoryTreeList, {
    debounceWait: 100,
    manual: true,
  } );

  useMount ( () => {
    /*    const promise1 = await findBySelectValueFormListPeomise(columnDialogs);
        console.log(promise1)
        setColumnDialogs(promise1)*/
    fetchByDataMenuTreeList ();
    // const promise = await findBySelectValueListPeomise ( columns );
    //   console.log(promise, columns)
    //  setColumns ( promise );

    console.log ( 'useMount' );
    columns[14] = {
      title: '操作',
      width: '164px',
      key: 'option',
      valueType: 'option',
      render: (_, row, index, action) => [
        <a
          key="link"
          onClick={(a) => {
            console.log ( row );

            editDialogInfo ( row, index );
          }}
        >
          编辑
        </a>,
      ],
    }
  } );
  useEffect ( async () => {
    /*   const promise1 = await findBySelectValueFormListPeomise(columnDialogs);
       console.log(promise1)
       setColumnDialogs(promise1)*/
    console.log ( 'useEffect' );
  }, [loading] );

  console.log ( columnDialogs );
  return (
    <div>
      <BetaSchemaForm<API.MenuInfo>
        formRef={formRef}
        initialValues={menuInfo}
        onCancel={() => setEditDialg ( false )}
        onVisibleChange={setEditDialg}
        title="菜单管理"
        visible={editDialg}
        layoutType="ModalForm"
        columns={columnDialogs}
        onFinish={async (values) => {
          values.id = menuInfo.id;
          console.log ( values );
          return new Promise<Boolean> ( (resolve, reject) => {
            editCategory ( values )
              .then ( () => {
                message.success ( '操作成功' );
                setEditDialg ( false );
                refresh ();
                resolve ( true );
              } )
              .catch ( () => {
                message.success ( '操作失败' );
                reject ( false );
              } );
          } );
        }}
      />
      <ProTable
        search={false}
        toolBarRender={() => [
          <Button
            onClick={() => {
              formRef.current?.resetFields ();
              openEditDialg ();
            }}
            key="button"
            icon={<PlusOutlined/>}
            type="primary"
          >
            新建
          </Button>,
        ]}
        onDataSourceChange={(d) => {
          console.log ( 'onDataSourceChange', d );
        }}
        onLoad={(d) => {
          // 数据加载完操作
          console.log ( 'onDataSourceChange', d );
        }}
        dataSource={dataList?.data}
        loading={loading}
        columns={columns}
        rowKey="id"
      ></ProTable>
    </div>
  );
};

export default cloneTbale;
